<template>
  <!-- 答题卡 组件 -->
  <van-popup
    v-model:show="shortPopup"
    position="right"
    :style="{ height: '100%', width: '80% ' }"
  >
    <div class="popup_content">
      <!-- 状态 类别 -->
      <div class="type_nav">
        <div class="left"><span></span>当前</div>
        <div class="center"><span></span>已做</div>
        <div class="right"><span></span>未做</div>
      </div>
      <!-- 题目类型 -->
      <div
        class="subject_box"
        v-for="(item, index_1) in sheetList"
        :key="index_1"
      >
        <div class="title" v-if="item?.list.length > 0">
          【{{ titleConvert(item.name) }}】
        </div>
        <div class="list" v-if="item?.list.length > 0">
          <div
            class="item"
            :class="
              selectStatus(item2.id) === 'current'
                ? 'currentActive'
                : selectStatus(item2.id)
                ? 'doneActive'
                : ''
            "
            v-for="(item2, index_2) in item?.list"
            :key="item2.id"
            @click="handleToTest(item2.id)"
          >
            {{ index_2 + 1 }}
          </div>
        </div>
      </div>
    </div>
  </van-popup>
</template>

<script>
import { computed, inject } from "@vue/runtime-core";
import { useStore } from "vuex";
export default {
  setup() {
    const store = useStore();
    // 答题卡弹出框状态
    const shortPopup = inject("shortPopup");
    const showShortPopup = inject("showShortPopup");
    // 弹出框控制
    // const showPopup = () => {
    //   show.value = true;
    // };
    // 数据接收及z转换
    const testList = inject("testList");
    const sheetList = computed(() => {
      let temp = [
        {
          name: "short",
          list: [],
        },
        {
          name: "one",
          list: [],
        },
        {
          name: "more",
          list: [],
        },
        {
          name: "judge",
          list: [],
        },
      ];
      testList.value?.forEach((item) => {
        if (item.type === "short") {
          console.log(temp[0].list);
          temp[0].list.push(item);
        } else if (item.type === "one") {
          temp[1].list.push(item);
        } else if (item.type === "more") {
          temp[2].list.push(item);
        } else if (item.type === "judge") {
          temp[3].list.push(item);
        }
      });
      return temp;
    });
    // 标题转换
    const titleConvert = computed(() => (type) => {
      switch (type) {
        case "short":
          return "简答题";
        case "one":
          return "单选题";
        case "more":
          return "多选题";
        case "judge":
          return "判断题";
        default:
          return "其它";
      }
    });
    // 监听selectGather，对应样式
    const selectStatus = computed(() => (id) => {
      // 拿取selectGather对应的对象
      let temp = store.state.topic.selectGather.find((item) => item.id === id);
      if (store.state.topic.current === id) {
        return "current";
      }
      return temp;
    });
    // 跳转至对应考题
    const handleToTest = (id) => {
      // 找到点击题的索引
      let index = testList.value.findIndex((item) => item.id === id);
      store.commit("topic/handleTopicStatus", {
        type: "topicIndex",
        value: index + 1,
      });
      showShortPopup();
    };
    return { shortPopup, sheetList, titleConvert, selectStatus, handleToTest };
  },
};
</script>

<style lang="less" scoped>
.popup_content {
  height: 100%;
  padding: 0 0.5rem;
  box-sizing: border-box;
  .subject_box {
    padding: 1rem 0;
    .title {
      height: 2rem;
      line-height: 2rem;
      font-size: 1.1rem;
      letter-spacing: 0.2rem;
    }
    .list {
      display: flex;
      justify-content: start;
      flex-wrap: wrap;
      .item {
        border: 1px solid #ccc;
        width: 3rem;
        height: 3rem;
        font-size: 1.4rem;
        color: #777171;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 0.5rem;
      }
      .currentActive {
        background-color: #ccc;
        border: none;
        color: white;
      }
      .doneActive {
        border: 1px solid #ff9800;
        color: #ff9800;
      }
      //   .undoneActive{

      //   }
    }
  }
  .type_nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 3rem;
    display: flex;
    justify-content: space-around;
    align-items: center;
    div {
      font-size: 0.9rem;
      color: #343434;
      display: flex;
      align-items: center;
      span {
        width: 0.7rem;
        height: 0.7rem;
        border: 1px solid #ccc;
        border-radius: 50%;
        margin-right: 0.3rem;
      }
    }
    .left span {
      background-color: #ccc;
      border: none;
    }
    .center span {
      border: 1px solid #ff9800;
    }
  }
}
</style>
